<template>
  <!-- 民警管理 -- 新增/编辑 -->
  <div>
    <public-modal
      width="600px"
      :footer="false"
      title="新增分类"
      modalStyle="device-addEditAddress"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <a-form :form="form" class="formStyle" autocomplete="off" layout="inline">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="分类名称">
                <a-input
                  placeholder="请输入分类名称"
                  v-decorator="[
                    'informationName',
                    {
                      rules: [{ required: true, message: '请输入分类名称!' }],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="上级分类">
                <a-input
                  placeholder="请输入上级分类"
                  v-decorator="[
                    'parentInformationName',
                    {
                      rules: [{ required: true, message: '请输入上级分类名称!' }],
                    },
                  ]"
                  :disabled="true"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="排序值">
                <a-input
                  placeholder="请输入排序值"
                  v-decorator="[
                    'informationOrder',
                    {
                      rules: [{ required: true, message: '请输入排序值!' }],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24" class="imageUpload" v-show="show_upload">
            <a-col :span="24">
              <a-form-item label="App图标">
                <a-upload
                  class="avatar-uploader"
                  list-type="picture-card"
                  :file-list="app_file_list"
                  :showUploadList="showUploadList"
                  @change="(e) => uploadChange(e, 'app_file_list')"
                  :remove="(e) => remove(e, 'app_file_list', 'appIconUrl')"
                  :customRequest="(e) => customRequest(e, 'app_file_list', 'appIconUrl')"
                  accept="image/png, image/JPG,image/jpeg"
                >
                  <div v-if="app_file_list.length < 1">
                    <img class="pictIcon" src="@/assets/imgs/pict-icon.png" alt="" />
                    <p class="imgText">点击上传</p>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24" class="imageUpload" v-show="show_upload">
            <a-col :span="24">
              <a-form-item label="小程序图标">
                <a-upload
                  class="avatar-uploader"
                  list-type="picture-card"
                  :file-list="mini_file_list"
                  :showUploadList="showUploadList"
                  @change="(e) => uploadChange(e, 'mini_file_list')"
                  :remove="(e) => remove(e, 'mini_file_list', 'iconUrl')"
                  :customRequest="(e) => customRequest(e, 'mini_file_list', 'iconUrl')"
                  accept="image/png, image/JPG,image/jpeg"
                >
                  <div v-if="mini_file_list.length < 1">
                    <img class="pictIcon" src="@/assets/imgs/pict-icon.png" alt="" />
                    <p class="imgText">点击上传</p>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </public-modal>
  </div>
</template>

<script>
import publicModal from '@/components/publicModal'
import { informationAdd } from '@/api/industry'
import { uploadFile } from '@/api/api'
export default {
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      records: {},

      form: this.$form.createForm(this),
      showUploadList: {
        showPreviewIcon: false,
      },

      appIconUrl: '',
      app_file_list: [],

      iconUrl: '',
      mini_file_list: [],

      show_upload: true,
    }
  },
  methods: {
    show(records) {
      this.records = records
      if (records.level > 0) this.show_upload = false
      this.publicVisible = true

      this.$nextTick(() => {
        this.form.setFieldsValue({ parentInformationName: records.parentInformationName || '暂无' })
      })
    },

    uploadChange(info, list) {
      info.file.status = 'done'
      this[list] = info.fileList
    },

    remove(list, url) {
      this[url] = ''
      this[list] = []
    },

    async customRequest(info, list, url) {
      let file = info.file
      const formData = new FormData()
      formData.append('file', file)
      formData.append('type', 5)
      let res = await uploadFile(formData)

      if (res.code == 200) {
        if (url == 'appIconUrl') {
          this.appIconUrl = res.result.halfPath
        } else if (url == 'iconUrl') {
          this.iconUrl = res.result.halfPath
        }
      }
    },

    handleOk() {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          values.parentId = this.records.id
          values.iconUrl = this.iconUrl
          values.appIconUrl = this.appIconUrl
          let res = await informationAdd(values)
          if (res.code == 200) {
            this.$message.success('保存成功!')
            this.$emit('success')
            this.cancel()
          } else {
            this.$message.error(res.message)
          }
        }
      })
    },

    cancel() {
      this.show_upload = true
      this.form.resetFields()
      this.appIconUrl = ''
      this.iconUrl = ''
      this.app_file_list = []
      this.mini_file_list = []
      this.publicVisible = false
    },
  },
}
</script>

<style scoped lang="less">
.formStyle {
  .ant-col {
    height: 55px;
  }
}

.imageUpload {
  margin-bottom: 80px;
  /deep/.avatar-uploader {
    > .ant-upload {
      width: 120px;
      height: 120px;
      background: var(--theme-input-bg);
      border: 1px solid var(--theme-input-border);
    }
  }

  /deep/.ant-upload-select-picture-card {
    width: 120px;
    height: 120px;
  }

  /deep/ .ant-upload-list-item {
    width: 120px;
    height: 120px;
  }

  .imgText {
    color: #1163b8;
    font-weight: 500;
  }

  .pictIcon {
    margin-bottom: 10px;
    width: 42px;
    height: 38px;
  }
}
</style>
